<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    {load href="/static/js/layer/skin/default/layer.css" /}
    <style>
        tr,th{
            text-align: center;
        }
        th{
            color: #797979;
        }
        #keyword{
            width: 300px;
        }
        .breadcrumb{
            background-color: #515151;
        }
        .breadcrumb span{
            color: #ffffff;
        }
        .ml15{
            margin-left: 15px;
        }
        .c2{
            cursor: pointer;
            text-align: center;
            display: inline-block;
            width: 100px;
            height: 35px;
            line-height: 15px;
            margin-right: 10px;
        }
        .mytab{
            font-size:15px;
            border-bottom: 1px solid #C8C8C8;
            margin-bottom: 20px;
        }

        .mytab .active{
            border-bottom: 4px solid #505050;
            color: #ff5800;
        }
        .mynav{
            height:56px;
            line-height: 60px;
            border-bottom: 1px dashed silver;
            margin-bottom: 20px;
        }
        .form-group{
            margin-bottom: 20px;
        }
        .filelabel{
            height: 80px;
            width: 80px;
            background-image: url("/static/img/file.png");
            background-size: cover;
            margin-left: 30px;
            margin-right: 30px;
        }
        .filelabel input{
            width: 1px;
        }
        .pcolor{
            transform:translateY(8px);
            vertical-align: bottom;
            height: 34px;
            width: 33px;
            display: inline-block;
            cursor: crosshair;
        }
        .bluelable{
            vertical-align: middle;
            background-color: #17B294;
            display: inline-block;
            height: 15px;
            width: 5px;
            margin-right: 10px;
        }
        .mb10{
            margin-bottom: 10px;
        }
        .add{
            color: #419eff;
            cursor: pointer;
        }
        .del{
            cursor: pointer;
            margin-left: 10px;
            margin-right: 10px;
            color: #FD5800;
        }
        .mytab{
            font-size:15px;
            border-bottom: 1px solid #C8C8C8;
            margin-bottom: 20px;
        }

        .mytab .active{
            border-bottom: 4px solid #505050;
            color: #ff5800;
        }
    </style>
</head>
<body>
<div style="padding-left: 20px;padding-right: 20px;">

    <ol class="breadcrumb">
        <li><span href="#">全部应用</span></li>
        <li><span href="#">会员卡</span></li>
        <li class="active"><span>新增会员卡</span></li>
    </ol>

    <div class="container-fluid row">
        <div class="mytab">
            <span class="c2 active">优惠券列表</span>
            <span class="c2">核销记录</span>
            <span class="c2">领取记录</span>
            <span class="c2">新建优惠券</span>
        </div>
        <div class="mynav col-xs-12">基本信息</div>
        <div class="form-group col-xs-12">
            <label for="inputEmail3" class="col-xs-2 control-label">优惠券名称</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="例如'商户名称'">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="inputPassword3" class="col-xs-2 control-label">背景颜色</label>
            <div class="col-xs-10">
                <span class="pcolor" style="background-color: #A7D834"></span><span class="pcolor" style="background-color: #61b25a"></span><span class="pcolor" style="background-color: #2a9e67"></span><span class="pcolor" style="background-color: #509ec8"></span><span class="pcolor" style="background-color: #5885cd"></span><span class="pcolor" style="background-color: #9062be"></span><span class="pcolor" style="background-color: #cf9947"></span><span class="pcolor" style="background-color: #e3b03b"></span><span class="pcolor" style="background-color: #ed8f3e"></span><span class="pcolor" style="background-color: #ef840c"></span><span class="pcolor" style="background-color: #dc6449"></span><span class="pcolor" style="background-color: #cb453c"></span><span class="pcolor" style="background-color: #ce3e35"></span><span class="pcolor" style="background-color: #5d6570"><img src="/static/img/select.svg"></span>
            </div>
        </div>

        <div class="form-group col-xs-12">
            <label for="inputPassword3" class="col-xs-2 control-label">有效期</label>
            <div class="col-xs-10 row">
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        固定日期区间
                    </label>
                    <input type="text">&nbsp;一&nbsp;<input type="text">
                </div>
                <div class="radio col-xs-12">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        永久有效
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="inputPassword3" class="col-xs-2 control-label">剩余数量</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="inputPassword3" class="col-xs-2 control-label">每人限领</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="">
            </div>
        </div>
        <div class="form-group col-xs-12">
            <label for="inputPassword3" class="col-xs-2 control-label">优惠券类型</label>
            <div class="col-xs-10">
                <div class="col-xs-12 row">
                    <label style="font-weight: 100;">
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        代金券
                    </label>
                    <label style="font-weight: 100;margin-left: 50px;">
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        折扣券
                    </label>
                    <label style="font-weight: 100;margin-left: 50px;">
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                        礼品券
                    </label>
                </div>
                <div class="col-xs-12 row" style="background: #F2F2F2;padding: 20px;">
                    <div class="mb10">减免金额<input style="width: 170px;">元</div>
                    <div>起用金额<input style="width: 170px;">元</div>
                </div>
                <div class="col-xs-12 row" style="background: #F2F2F2;padding: 20px;" hidden>
                    <div class="mb10">买单金额<input style="width: 170px;" placeholder="请填写1-9.9之间的数字">折</div>
                    <div>起用金额<input style="width: 170px;" placeholder="每单最高减免金额">元</div>
                </div>
                <div class="col-xs-12 row" style="background: #F2F2F2;padding: 20px;" hidden>
                    <div class="mb10">礼品名称<input style="width: 170px;" placeholder="例如'特调水果茶一杯'"></div>
                </div>
             </div>
        </div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">适用门店</label>
        <div class="col-xs-10 row">
            <div class="radio col-xs-12">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    本商户下所有门店
                </label>
            </div>
            <div class="radio col-xs-12">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    部分门店
                    <span style="margin-left: 30px;color: #419eff;">+选择</span>
                </label>
            </div>
        </div>
    </div>
    <div class="mynav col-xs-12">基本信息</div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">使用说明</label>
        <div class="col-xs-10">
            <textarea rows="8" class="form-control" id="inputPassword3" placeholder="不可与其他优惠券叠加使用"></textarea>
        </div>
    </div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">使用提醒</label>
        <div class="col-xs-10">
            <textarea rows="4" class="form-control" id="inputPassword3" placeholder="请在结账时出示给收银员"></textarea>
        </div>
    </div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">客服电话</label>
        <div class="col-xs-10">
            <input type="tel" class="form-control" id="inputPassword3" placeholder="">
        </div>
    </div>
    <div class="mynav col-xs-12">基本信息</div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">描述图片</label>
        <div class="col-xs-10">
            <label class="filelabel" style="margin-left: 0;">
                <input type="file" style="opacity: 0">
            </label>
            <span style="vertical-align: bottom;color: #9fa19f;">图片建议尺寸:900像素*500像素,大小不超过2M</span>
        </div>
    </div>
    <div class="form-group col-xs-12">
        <label for="inputPassword3" class="col-xs-2 control-label">描述文字</label>
        <div class="col-xs-10">
            <textarea rows="6" class="form-control" id="inputPassword3" placeholder="请输入描述内容"></textarea>
        </div>
    </div>
    <div class="form-group col-xs-12" hidden>
        <div class="col-sm-offset-2 col-xs-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="mynav col-xs-12"></div>
    <div class="form-group col-xs-12">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{load href="/static/js/layer/layer.js" /}
<script>

</script>
</body>
</html>